<template>
    <div>
      <div class="detail-swiper">
        <div class="detail-swiper-box">
          <van-swipe>
            <van-swipe-item v-for="(v,index) in swipeImg" :key="index">
                <img :src="v.value" alt="" class="img-swipe">
            </van-swipe-item>
          </van-swipe>

        </div>
      </div>
      <!--普通商品-->
      <div v-if="types == 1" >
        <div v-if="isNew == 1 ">
          <div class="detail-sale" >
            <div class="detail-title">
              <p style="font-family:'站酷快乐体' !important;width: 45vw;">
                <img src="../../assets/img/beforeSaleTime.png" alt="" style="width: 35vw;height: 5vw;margin-top: 2vw">
              </p>
              <div class="right">
                <span style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距开始倒计时</span>
                <div class="detail-sale-time"  style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -11vw;">
                  <span>{{timeNew.day}}</span>天
                  <span>{{timeNew.hour}}</span>时
                  <span>{{timeNew.min}}</span>分
                  <span>{{timeNew.sec}}</span>秒
                </div>
              </div>
              <!--<span>{{goodsInfo.time | moment | timeSec}}</span>秒</div>-->
            </div>
          </div>
        </div>
        <div v-else></div>
      </div>
      <!--团购商品-->
      <div v-if="types == 2">
        <div class="detail-sale">
          <div class="detail-title">
            <p style="font-size: 25px;color: #fff;position:relative;top: -3.5vw;">团购商品</p>
            <p class="noperson" style="width:14.93vw;height:5.3vw;
            background:linear-gradient(-90deg,rgba(255,149,151,1) 0%,rgba(255,162,138,1) 100%);
             border-radius:4px;font-size: 14px;color: #fff;text-align: center;position: relative;left: 5vw;top: -4vw;">
              {{group.group_number}}人团</p>
            <div class="groupright">
              <span v-if="iStart == 1" style="float: right;position: relative;top: -10vw;width: 43vw;left: 5vw;"
                    class="atTime">距开始倒计时</span>
              <span v-if="iStart == 0" style="float: right;position: relative;top: -10vw;width: 43vw;left: 5vw;"
                    class="atTime">距结束倒计时</span>
              <div class="detail-sale-time" style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -13vw;">
                <span>{{timeGroup.day}}</span>天
                <span>{{timeGroup.hour}}</span>时
                <span>{{timeGroup.min}}</span>分
                <span>{{timeGroup.sec}}</span>秒
              </div>
            </div>
          </div>
        </div>
      </div>
      <!-- 限时抢购-->
      <div v-if="types == 3">
        <div v-if="limitType == 1">
          <div class="detail-sale"  style="background:linear-gradient(to right,#FFBE62,#FF966D);" id="timeLimit">
            <div class="detail-title">
              <p  style="width: 45vw;">
                <img src="../../assets/img/limit_time.png" alt="" style="width: 19.4vw;height: 6vw;margin-top: 1vw">
              </p>
              <div class="right">
                <span  v-if="iStart == 1"  style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距开始倒计时</span>
                <span  v-if="iStart == 0"  style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距结束倒计时</span>
                <div class="detail-sale-time" style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -11vw;">
                  <span>{{timeLimit.day}}</span>天
                  <span>{{timeLimit.hour}}</span>时
                  <span>{{timeLimit.min}}</span>分
                  <span>{{timeLimit.sec}}</span>秒
                </div>
              </div>
            </div>
          </div>
        </div>
        <div v-else>
          <div class="detail-sale"  style="background:linear-gradient(to right,#FFBE62,#FF966D);">
            <div class="detail-title">
              <p style="width: 45vw;">
                <img src="../../assets/img/limit.png" alt="" style="width: 13.4vw;height: 6vw;margin-top: 1vw;float: left;">
                <span style="font-size: 26px;color: #fff;float: left;margin:-2vw 2vw 0 2vw;" id="buyLimit">{{buyLimit}}</span>
                <img src="../../assets/img/jian.png" alt=""
                     style="width: 6.4vw;height: 6vw;margin-top: 1vw;float: left;">
              </p>
              <div class="limitRight" style="position:relative;top: 6vw;">
                <span  v-if="iStart == 1" style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距开始倒计时</span>
                <span  v-if="iStart == 0" style="float: right;position: relative;top: -8vw;width: 43vw;left: 5vw;">距结束倒计时</span>
                <div class="detail-sale-time" style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -15vw;">
                  <span>{{timeLimit.day}}</span>天
                  <span>{{timeLimit.hour}}</span>时
                  <span>{{timeLimit.min}}</span>分
                  <span>{{timeLimit.sec}}</span>秒
                </div>
              </div>
            </div>
          </div>
        </div>
       <!-- <div class="detail-sale" v-if="goodsType === 5">
          <div class="detail-title">
            <p>限时购</p>
            <div class="detail-sale-time">倒计时：<span>10</span>天<span>10</span>时<span>10</span>分<span>10</span>秒</div>
          </div>
        </div>-->
      </div>
      <!--双十二活动商品-->
      <div v-if="types == 6" >
        <div>
          <div class="detail-sale" >
            <div class="detail-title">
              <div style="font-family:'站酷快乐体' !important;width: 45vw;">
                <p v-if="iStart == 1" style="font-size: 12px;"><span style="font-size: 19px;">{{goodsInfo.activity_name}}</span>开启倒计时：</p>
                <p v-if="iStart == 0" style="font-size: 12px;"><span style="font-size: 19px;">{{goodsInfo.activity_name}}</span>结束倒计时：</p>
              </div>
              <div class="right">
                <div class="detail-sale-time" id="activPosi"  style="width: 75vw;display: inline-block;position: relative;left: 30%;top: -7vw;">
                  <span>{{timeActivity.day}}</span>天
                  <span>{{timeActivity.hour}}</span>时
                  <span>{{timeActivity.min}}</span>分
                  <span>{{timeActivity.sec}}</span>秒
                </div>
              </div>
              <!--<span>{{goodsInfo.time | moment | timeSec}}</span>秒</div>-->
            </div>
          </div>
        </div>
      </div>
      <!--预售商品-->
      <div v-else-if="presale == 1">
        <div class="presaleBox">
          <div class="left">
            <img src="../../assets/img/presale.png" alt="">
          </div>
          <div class="right">{{goodsInfo.presale}}</div>
        </div>
       <!-- <div class="detail-sale" v-if="goodsType === 6" >
          <div class="detail-title">
            <p>仅售五件</p>
            <div class="detail-sale-time">
              <p style="float: left;">每个用户限购一件哦</p><br>
              <p style="float: left;">倒计时：<span>10</span>天<span>10</span>时<span>10</span>分<span>10</span>秒</p>
            </div>
          </div>
        </div>
        <div class="detail-sale" v-if="goodsType === 7" style="background: #CCCCCC;">
          <div class="detail-title">
            <p>仅售五件</p>
            <div class="detail-sale-time">
              <div>倒计时：<span>10</span>天<span>10</span>时<span>10</span>分<span>10</span>秒</div>
            </div>
          </div>
        </div>
        <div class="detail-sale" v-if="goodsType === 10">
          <p style="font-size: 18px;color: #fff;justify-content: center;text-align: center;margin: 0px auto;">
            预售商品，下单后五到十天发货
          </p>
        </div>-->
      </div>
      <!--价格-->
      <div class="detail-price">
        <div class="detail-prices" v-if="types == 6">
          <p><span style="font-size: 20px;color: #ff5230;">￥{{goodsInfo.sale_price}}</span></p>
          <p><span style="text-decoration: line-through;color: #999;font-size: 12px;">￥{{goodsInfo.line_price}}</span></p>
          <p v-if="iStart == 1" style="float: right;">
            <span style="float: right;color: #666;" v-html="goodsInfo.activity_title"></span>
          </p>
          <p v-if="iStart == 0" style="float: right;">
            <span style="float: right;color: #666;font-size: 13px;">销量：{{goodsInfo.sales}}</span>
          </p>
        </div>
        <div class="detail-prices" v-else>
          <p><span style="font-size: 20px;color: #ff5230;">￥{{goodsInfo.sale_price}}</span></p>
          <p><span style="text-decoration: line-through;color: #999;font-size: 12px;">￥{{goodsInfo.line_price}}</span></p>
          <p style="float: right;"><span style="float: right;color: #666;font-size: 13px;">销量：{{goodsInfo.sales}}</span></p>
        </div>
      </div>
      <div class="detail-member-wrap">
        <p style="width: 90%;margin: 0px auto;color: #353535;font-size: 15px;">{{goodsInfo.goods_name}}</p>
        <div class="detail-member">
          <div class="detail-member_card" @click="alertLog">
            <div v-if="goodsInfo.is_vip === 1">
               <div class="detail-member-title">
                 <span class="vip_server">会员服务</span>
                <p style="float: left;margin-left: 2vw;" v-html="goodsInfo.member_tip"></p>
                <a href="javascript:;" class="detail-member_go" style="float: right;margin-right: 2vw;">
                </a>
              </div>
            </div>
            <div v-else>
              <div class="detail-member-title">
                <span class="vip_server">会员服务</span>
                <p style="float: left;margin-left: -12vw;" v-html="goodsInfo.member_tip"></p>
                <a href="javascript:;" class="detail-member_go" style="float: right;margin-right: 2vw;">
                  <span>开通会员</span>
                  <i class="iconfont">&#xe601;</i>
                </a>

              </div>
            </div>
          </div>
          <!--<p v-if="goodsInfo.description">{{goodsInfo.description}}</p>-->
          <div class="detail-saled">
            <ul>
              <li v-for="(v,i) in promise" :key="i">
                {{v.value}}
              </li>
            </ul>
          </div>
        </div>
      </div>
    </div>
</template>

<script>
  import { Dialog } from 'vant'
    export default {
        name: "products",
      props:['goodsType','goodsInfo','swipeImg','promise','time','isNew','types','limit','group',
        'limitType','buyLimit','presale','activity'],
      data(){
        /*vm :this;*/
          return{
            date:'',
            seconds:'',
            dayDiff:'',
            timer:'',
            timeLimit: {
              day: null,
              hour: null,
              min: null,
              sec: null
            },
            timeNew: {
              day: null,
              hour: null,
              min: null,
              sec: null
            },
            timeGroup: {
              day: null,
              hour: null,
              min: null,
              sec: null
            },
            timeActivity:{
              day: null,
              hour: null,
              min: null,
              sec: null
            },
            iStart:1,
          }
      },
      updated(){
        if (this.types == 1){
          this.settimer;
        } else if (this.types == 2) {
          this.setGroupTime;
        }else if (this.types == 3) {
          this.setLimitTime;
        }else if (this.types == 6) {
          this.setActivityTimer;
        }
      },
      methods:{
        alertLog(){
          Dialog.confirm({
            message: '是否前往App操作'
          }).then(() => {
            window.location.href="http://www.napin.com/download.html"
          }).catch(() => {

          });
        },
        vip(){
          window.location.href="http://www.napin.com/download.html"
        }
      },
      created(){
      },
      computed:{
        settimer: function () {
          var that = this;
          setInterval( ()=> {
            var dateEnd = new Date(that.goodsInfo.new_time*1000);
            that.dateNow = new Date();
            var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
            if (surplusTime<0) {
              that.timeNew.day = 0;
              that.timeNew.hour = 0;
              that.timeNew.min = 0;
              that.timeNew.sec = 0;
            }else{
              that.timeNew.day = Math.floor(surplusTime / 1000 / 24 / 3600);
              that.timeNew.hour = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600) / 1000 / 3600);
              that.timeNew.min = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600) / 1000 / 60);
              that.timeNew.sec = Math.floor((surplusTime - that.timeNew.day * 1000 * 24 * 3600 - that.timeNew.hour * 1000 * 3600 - that.timeNew.min * 1000 * 60) / 1000)
            }
          }, 200)
        },
        setActivityTimer: function () {
          var that = this;
          setInterval(()=> {
            var dateEnd = new Date(that.activity.end_time*1000);
            that.dateNow = new Date();
            /*var surplusTime = dateEnd.getTime() - that.dateNow.getTime();*/
            var dateStart = new Date(that.activity.start_time*1000);
            var useTime = dateStart.getTime() - that.dateNow.getTime();
            if (useTime>0) {
              that.iStart = 1;
              var surplusTime = dateStart.getTime() - that.dateNow.getTime();
            }else{
              that.iStart = 0;
              var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
            }
            if (surplusTime<0) {
              that.timeActivity.day = 0;
              that.timeActivity.hour = 0;
              that.timeActivity.min = 0;
              that.timeActivity.sec = 0;
            }else{
              that.timeActivity.day = Math.floor(surplusTime / 1000 / 24 / 3600);
              that.timeActivity.hour = Math.floor((surplusTime - that.timeActivity.day * 1000 * 24 * 3600) / 1000 / 3600);
              that.timeActivity.min = Math.floor((surplusTime - that.timeActivity.day * 1000 * 24 * 3600 - that.timeActivity.hour * 1000 * 3600) / 1000 / 60);
              that.timeActivity.sec = Math.floor((surplusTime - that.timeActivity.day * 1000 * 24 * 3600 - that.timeActivity.hour * 1000 * 3600 - that.timeActivity.min * 1000 * 60) / 1000)
            }
          }, 200)
        },
        setLimitTime: function () {
          var that = this;
          setInterval(()=> {
            var dateEnd = new Date(that.limit.end_time*1000);
            that.dateNow = new Date();
            var dateStart = new Date(that.limit.start_time*1000);
            var useTime = dateStart.getTime() - that.dateNow.getTime();
            if (useTime>0) {
              that.iStart = 1;
              var surplusTime = dateStart.getTime() - that.dateNow.getTime();
            }else{
              that.iStart = 0;
              var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
            }
            if (surplusTime<0) {
              $("#timeLimit").css('background','linear-gradient(to right,#FF427C,#FF3535)');
              that.timeLimit.day = 0;
              that.timeLimit.hour = 0;
              that.timeLimit.min = 0;
              that.timeLimit.sec = 0;
            }else{
              that.timeLimit.day = Math.floor(surplusTime / 1000 / 24 / 3600);
              that.timeLimit.hour = Math.floor((surplusTime - that.timeLimit.day * 1000 * 24 * 3600) / 1000 / 3600);
              that.timeLimit.min = Math.floor((surplusTime - that.timeLimit.day * 1000 * 24 * 3600 - that.timeLimit.hour * 1000 * 3600) / 1000 / 60);
              that.timeLimit.sec = Math.floor((surplusTime - that.timeLimit.day * 1000 * 24 * 3600 - that.timeLimit.hour * 1000 * 3600 - that.timeLimit.min * 1000 * 60) / 1000)
            }
          }, 200)
        },
        setGroupTime: function () {
          var that = this;
          setInterval( ()=> {
            var dateEnd = new Date(that.group.end_time*1000);
            var dateStart = new Date(that.group.start_time*1000);
            that.dateNow = new Date();
            var useTime = dateStart.getTime() - that.dateNow.getTime();
            if (useTime>0) {
              this.iStart = 1;
              var surplusTime = dateStart.getTime() - that.dateNow.getTime();
            }else{
              this.iStart = 0;
              var surplusTime = dateEnd.getTime() - that.dateNow.getTime();
            }
            if (surplusTime<0) {
              that.timeGroup.day = 0;
              that.timeGroup.hour = 0;
              that.timeGroup.min = 0;
              that.timeGroup.sec = 0;
            }else{
              that.timeGroup.day = Math.floor(surplusTime / 1000 / 24 / 3600);
              that.timeGroup.hour = Math.floor((surplusTime - that.timeGroup.day * 1000 * 24 * 3600) / 1000 / 3600);
              that.timeGroup.min = Math.floor((surplusTime - that.timeGroup.day * 1000 * 24 * 3600 - that.timeGroup.hour * 1000 * 3600) / 1000 / 60);
              that.timeGroup.sec = Math.floor((surplusTime - that.timeGroup.day * 1000 * 24 * 3600 - that.timeGroup.hour * 1000 * 3600 - that.timeGroup.min * 1000 * 60) / 1000)
            }
          }, 200)
        }
      },
      mounted () {
        var _this = this; //声明一个变量指向Vue实例this，保证作用域一致
        this.timer = setInterval(function(){
          _this.value = new Date(); //修改数据date
        },1000)
      },
     beforeDestroy () {
       if(this.timer) {
            clearInterval(this.timer);//在vue实例销毁钱，清除我们的定时器
        }
       },
    }
</script>

<style scoped lang="scss">
  .presaleBox{
    width: 100vw;
    height: 16vw;
    .right{
      width: 68vw;
      height: 100%;
      background: linear-gradient(to right,#FFBE62,#FF5353);
      display: inline-block;
      float: right;
      font-size: 18px;
      color: #fff;
      text-align: center;
      line-height: 16vw;
    }
      .left{
        width: 32vw;
        height: 100%;
        float: left;
        background-color: #FFF25C;
        display: inline-block;
        -webkit-box-sizing: border-box;
        -moz-box-sizing: border-box;
        box-sizing: border-box;
        padding-top: 5vw;
        img{
          width: 22vw;
          height: 5.5vw;
          -webkit-box-sizing: border-box;
          box-sizing: border-box;
          margin-left: 4.5vw;
        }
      }
  }
  @media screen and (min-width: 359px) and (max-width: 375px){
    .detail-sale .detail-title .groupright{
      top: -6.9vw !important;
      position: relative;
    }
    .bottoms .salePrece{
      right: 8vw !important;
    }
  }
  @media screen and (min-width: 410px) and (max-width: 415px){
    #activPosi{
      top: -9vw !important;
    }
  }
  @media screen and (min-width: 360px) and (max-width: 365px){
    #activPosi{
      top: -16vw !important;
    }
  }
  @media screen and (min-width: 320px) and (max-width: 359px){
    .detail-sale .detail-title .right{
      top: -4.9vw !important;
    }
    .detail-sale .detail-title .groupright{
      top: -7.9vw !important;
      position: relative;
    }
    .limitRight{
      top: 6vw;
    }
    #activPosi{
      top: -6vw !important;
    }
  }
  @media screen and (min-width:410px) and (max-width: 414px){
    .right{
      top: 0.1vw !important;
    }
  }
  @media screen and (min-width: 375px) and (max-width: 410px){
    .detail-sale .detail-title .right{
      top: -2.9vw !important;
    }
    .detail-sale .detail-title .groupright{
      top: -5.9vw !important;
      position: relative;
    }
    .limitRight{
      top: 6vw;
    }
    #buyLimit{
      margin-top: -1vw !important;
    }
  }
  @media screen and (min-width: 411px) and (max-width: 414px){
    #buyLimit{
      margin-top: -1vw !important;
    }
    .limitRight{
      top: 6vw;
    }
    .detail-sale .detail-title .groupright{
      top: -5.9vw !important;
      position: relative;
    }
  }
  @media screen and (min-width: 414px){
    .detail-sale .detail-title .right{
      top: -2.4vw !important;
    }
    .detail-sale .detail-title .groupright{
      top: -5.9vw !important;
      position: relative;
    }
    .atTime{
      left: 7vw !important;
    }
    .limitRight{
      top: 6vw;
    }
    #buyLimit{
      margin-top: -1vw !important;
    }
  }
  @font-face {
    font-family: 'iconfont';  /* project id 861873 */
    src: url('//at.alicdn.com/t/font_861873_t78yjy88oh.eot');
    src: url('//at.alicdn.com/t/font_861873_t78yjy88oh.eot?#iefix') format('embedded-opentype'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.woff') format('woff'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.ttf') format('truetype'),
    url('//at.alicdn.com/t/font_861873_t78yjy88oh.svg#iconfont') format('svg');
  }
  $white: #fff;
  .detail-swiper {
    width: 100vw;
    height:100vw;
    background: $white;
    .detail-swiper-box {
      width: 100%;
      margin: 0 auto;
      position: relative;
      overflow: hidden;
      height: 100%;
    > .van-swipe-item {
      width: 100% !important;
      overflow: hidden;
    }
  .detail-clean {
    position: absolute;
    bottom: .625rem;
    right: .6875rem;
    width: 3.75rem;
    height: 1.5625rem;
    display: flex;
    justify-content: center;
    align-items: center;
    border-radius: .3125rem;
    border: 1px solid #666;
    font-size: .8125rem;
    color: #666;
  }
  }
  }
  .detail-price {
    width: 100%;
    height: 7vw;
    line-height: 7vw;
    background: $white;
    margin-top: 5vw;
    margin-bottom: 2vw;
  .detail-prices {
    width: 90%;
    height: 100%;
    margin: 0 auto;
  p {
    float: left;
  }
  }
  }
  .detail-sale {
    width: 100%;
    height: 3.75rem;
    background: linear-gradient(to right,#FFBE62,#FF5353);
    //background: #ff4c50;
    color: $white;
    display: flex;
    align-items: center;
  .detail-title {
    width: 90%;
    height: 57%;
    margin: 0 auto;
    .right{
      position:relative;
      top:6.1vw;
    }
  > p {
    font-size: 25px;
    font-family:"站酷快乐体" !important;
    color: #FEFED5;
  }
  .detail-sale-time {
    /*display: flex;*/
    justify-content: center;
    align-items: center;
    text-align: center;
    font-size: 13px;
    margin-top: 4vw;
    div{
      display: flex;
      text-align: center;
      justify-content: center;
      margin-top: 2vw;
    }
    p{
      display:block;
      width:100%;
      height:50%;
      float: left;
      text-align: center;
    }

  > span {
    width: 5vw;
    height:4vw;
    display: inline-block;
    line-height: 4vw;
    text-align: center;
    background: $white;
    color: #FF5151;
    font-size:11px;
    color: #FF5151;
    margin-right:1vw;
  &:nth-last-of-type(2) {
     margin-left: .3125rem;
     color: #FF5151;
   }
  &:nth-last-of-type(3) {
     margin-left: .3125rem;
    color: #FF5151;
   }
  &:nth-last-of-type(4) {
     margin-left: .3125rem;
    color: #FF5151;
   }
  }
  }
  }
  }
  .detail-member-wrap {
    width: 100%;
    height: auto;
    background: $white;
  .detail-member {
    width: 92%;
    margin: 0 auto;
    padding-top: .75rem;
  .detail-member_card {
    width: 92vw;
    height: 9.6vw;
    background:linear-gradient(to right,#FDFFCD,#FFEBBB);
    color: #FF4C50;
    display: flex;
    align-items: center;
    font-size: 13px;
    line-height: 9.6vw;
    border-radius: 7px;
    margin-bottom: 2vw;
  .detail-member-title {
    /*width: 94%;*/
    width: 92vw;
    margin: 0 auto;
    display: flex;
    color: #FF4C50;
    font-size: 13px;
    justify-content: space-between;
    .vip_server{
      width: 16vw;
      height: 4.7vw;
      font-size: 10px;
      -webkit-border-radius: 9px;
      -moz-border-radius: 9px;
      border-radius: 9px;
      color: #333333;
      line-height: 4.7vw;
      text-align: center;
      background: #FFE7A8;
      margin-left: 4vw;
      margin-top: 2.5vw;
    }
  > a {
    color: #FF4C50;
    display: flex;
    font-size: 13px;
    align-items: center;
  > .iconfont {
    font-size: .8125rem;
  }
  }
  }
  > p {
  }
  }
  > p {
  &:first-of-type {
     font-size: .9375rem;
     color: #353535;

   }
  &:last-of-type {
     font-size: .6875rem;
     color: #666;
     display: -webkit-box;
     -webkit-box-orient: vertical;
     -webkit-line-clamp: 2;
     overflow: hidden;
     margin-top: .625rem;
     margin-bottom: .9375rem;
   }
  }
  .detail-saled {
    width: 100%;
  ul {
    width: 100%;
    display: flex;
    justify-content: space-between;
  li {
    color: #999;
    font-size: 11px;
  }
  }
  }
  }
  }
</style>
